import React, { useState, useRef, useLayoutEffect } from 'react';
import ReactDOM from 'react-dom';

export const Conditional = (props) => {
  const [targetElement] = useState(() => document.createElement('div'));
  const containerRef = useRef();
  const activatedRef = useRef(false); // 记录组件是否“被激活过”
  activatedRef.current = activatedRef.current || props.active;

  useLayoutEffect(() => {
    if (props.active) {
      containerRef.current.appendChild(targetElement);
    } else {
      try {
        containerRef.current.removeChild(targetElement);
      } catch (error) {}
    }
  }, [props.active]);

  return (
    <>
      <div ref={containerRef} />
      {/*  如果“被激活过”，才渲染 children */}
      {activatedRef.current
        ? ReactDOM.createPortal(props.children, targetElement)
        : null}
    </>
  );
};

// 不得不承认的是，基于 Portal 方案的 Conditional 组件并不能包治百病，和 Vue 的 keep-alive 相比，也存在不少缺憾：
// 需要手动控制 active ，不能直接基于子组件销毁/创建的生命周期事件
// 缺少失活/激活的生命周期时间，子组件无法感知自己是不是被缓存起来了
// 依赖了 ReactDOM ，对 SSR 不够友好
